<template>
    <div class="group-lst">
        <ZwSearchForm row-num="4" :option="searchOption" @search="search" @reset="reset" />
        <div class="container-table">
            <ZwTable
                ref="tableRef"
                class="table-box"
                tab-h="initial"
                :fetch-api="fetchApi()"
                :close-loading="true"
                :option="tableOption"
                :fetch-params="state.searchParams">
            </ZwTable>
        </div>
    </div>
</template>
<script setup lang="tsx">
import { ref, reactive, computed, onActivated, onMounted, onUnmounted, nextTick, defineAsyncComponent } from 'vue';
import ZwSearchForm from '@/components/zw/search-form1.0/SearchForm';
import ZwTable from '@/components/zw/table1.0/Table';
import { rewardIntegralList } from '@/api/smartMarketing/community/communityCheckIn';
import { deepCopy } from '@/utils/helper';
import { useRoute } from 'vue-router';
import { renderUserName } from './longName.tsx';

const route = useRoute();
const tableRef: any = ref<HTMLElement | null>(null);
const defaultParams = {
    activity_id: route.query.activity_id, //活动ID
    nickname: '', //昵称
    reward_type: '' //奖励设置 1-每日打卡奖励 2-连续打卡奖励 3-累计打卡奖励
};
const state = reactive({
    searchParams: deepCopy(defaultParams)
});
const searchOption = computed(() => {
    return [
        {
            label: '用户昵称',
            name: 'nickname',
            value: '',
            type: 'input',
            placeholder: '请输入用户昵称'
        },
        {
            label: '奖励类型',
            name: 'reward_type',
            value: [],
            type: 'select',
            placeholder: '请选择奖励类型',
            formatOption: (v: any) => ({
                label: v.label,
                value: v.value
            }),
            optionList: [
                {
                    value: '1',
                    label: '每日打卡奖励'
                }
            ]
        }
    ];
});
const search = (v: any) => {
    if (v.nickname) {
        v.nickname = v.nickname.trim();
    }
    state.searchParams = { ...deepCopy(defaultParams), ...v };
};
const reset = (v: any) => {
    state.searchParams = { ...deepCopy(defaultParams) };
};
// 表格
const tableOption = [
    {
        prop: 'serial_num',
        label: '序号',
        width: 100
    },
    {
        prop: 'nickname',
        label: '用户信息',
        width: 350,
        render: renderUserName
    },
    {
        prop: 'points_name',
        label: '奖品名称',
        minWidth: 200,
        render({ row, column, index }: any) {
            return <div>{row.points_name ? row.points_name : '--'}</div>;
        }
    },

    {
        prop: 'reward_type',
        label: '奖励类型',
        minWidth: 200,
        render({ row, column, index }: any) {
            return (
                <div>
                    {row.reward_type == 1 ? '每日打卡奖励' : row.reward_type == 2 ? '连续打卡奖励' : '累计打卡奖励'}
                </div>
            );
        }
    },
    {
        prop: 'give_time',
        label: '发放时间',
        minWidth: 200,
        render({ row, column, index }: any) {
            return <div>{row.give_time ? row.give_time : '--'}</div>;
        }
    },
    {
        prop: 'remark',
        label: '发放原因',
        width: 350,
        render({ row, column, index }: any) {
            return <div>{row.remark ? row.remark : '--'}</div>;
        }
    }
];
const fetchApi = () => {
    return rewardIntegralList;
};
</script>
<style lang="scss" scoped>
.group-lst {
    padding: 24px;
    height: calc(100vh - 406px);
    display: flex;
    flex-direction: column;

    .container-table {
        display: flex;
        flex-direction: column;
        overflow: hidden;
        box-sizing: border-box;
        background-color: #fff;
        flex: 1;

        .zw-table {
            display: flex;
            flex-direction: column;
            flex: 1;
            overflow: hidden;

            :deep(.el-table) {
                flex: 1;

                .el-table__empty-block {
                    position: absolute;
                    top: 50%;
                    left: 50%;
                    transform: translate(-50%, -50%);
                }
            }
        }
    }

    :deep(.zw-search-form1) {
        padding: 0;
        padding-bottom: 16px;
    }
}
</style>
